<template>
	<div class="operation-log">
		<el-table :data="logList" border>
			<el-table-column prop="type" label="操作类型" width="120" align="center">
				<template #default="{ row }">
					<el-tag
						:type="getTypeTag(row.type)"
						effect="plain"
						size="small"
						class="status-tag"
					>
						{{ row.type }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="operator" label="操作人" width="120" />
			<el-table-column
				prop="content"
				label="操作内容"
				min-width="200"
				show-overflow-tooltip
			/>
			<el-table-column prop="operateTime" label="操作时间" width="180" />
			<el-table-column
				prop="remark"
				label="备注"
				min-width="200"
				show-overflow-tooltip
			/>
		</el-table>
	</div>
</template>

<script setup>
const props = defineProps({
	logList: {
		type: Array,
		default: () => [],
	},
});

// 获取操作类型对应的标签类型
const getTypeTag = (type) => {
	const typeMap = {
		取消订单: 'danger',
		修改货物信息: 'warning',
		订单加急: 'warning',
		修改收发货地址: 'info',
		创建订单: 'success',
	};
	return typeMap[type] || 'info';
};
</script>

<style lang="scss" scoped>
.operation-log {
	:deep(.el-table) {
		--el-table-border-color: var(--el-border-color-lighter);
		--el-table-header-bg-color: var(--el-fill-color-light);
		--el-table-row-hover-bg-color: var(--el-fill-color);

		.el-table__header {
			th {
				font-weight: 500;
				color: var(--el-text-color-regular);
				background-color: var(--el-fill-color-light);
			}
		}

		.status-tag {
			width: 90px;
		}
	}
}
</style>
